<template>

  <section class="cms-body flex">
    <!-- 树组件 -->
    <commonTree @change="getProblemTopic" :url="$api.problemTopicList" :hasContent='true'></commonTree>

    <div class="cms-content-right">
      <div class="cms-list-header clearfix flex">
        <div class="bread-box cms-left">
          <label class="">当前目录:</label>
          <ul class="type-bread">
            <li class="bread-items" v-for="(item,index) in breadItems" :key="index">
              <a href="javascript:void(0)" @click="clickBread(item.id,index)">{{item.name}}</a>
            </li>
          </ul>
        </div>

        <div class="cms-list-header flex-between">
          <el-button type="primary" icon="el-icon-plus" @click="routerLink('/problem/save','save','0',params)"
                     v-show="isShow" v-perms="'/problem/save'">添加
          </el-button>
          <div>
            <el-select v-model="params.isTop" @change="goQuery()">
              <el-option label="置顶状态" value=""></el-option>
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>

            <el-select v-model="params.isDisplay" @change="goQuery()">
              <el-option label="展示状态" value=""></el-option>
              <el-option label="否" value="0"></el-option>
              <el-option label="是" value="1"></el-option>
            </el-select>

            <cms-input label="问题名称" v-model="params.problemName"></cms-input>
            <el-button @click="goQuery()">查询</el-button>
          </div>
        </div>
      </div>

      <el-table :data="tableData" stripe @selection-change="checkIdsAndStatus" v-loading="loading">
        <el-table-column type="selection" width="35" align="center"></el-table-column>
        <el-table-column prop="id" label="id" width="80" align="center"></el-table-column>
        <el-table-column prop="problemName" label="问题名称" width="200" align="left"></el-table-column>
        <el-table-column prop="problemTopicName" label="话题名称" width="200" align="center"></el-table-column>
        <el-table-column prop="problemImg" label="封面图" align="center">
          <template slot-scope="scope">
            <img-preivew :src="scope.row.problemImg | imgPathFilter"></img-preivew>
          </template>
        </el-table-column>

        <el-table-column prop="isDisplay" label="是否展示" align="center" width="80">
          <div slot-scope="scope">
            <el-switch v-model="scope.row.isDisplay" active-color="#FFA500" inactive-color="#C0CCDA" :active-value="1"
                       :inactive-value="0" @change="changeState(scope.row.id,scope.row.isDisplay,1)">
            </el-switch>
          </div>
        </el-table-column>
        <el-table-column prop="isTop" label="是否置顶" align="center" width="80">
          <div slot-scope="scope">
            <el-switch v-model="scope.row.isTop" active-color="#FFA500" inactive-color="#C0CCDA" :active-value="1"
                       :inactive-value="0" @change="changeState(scope.row.id,scope.row.isTop,2)">
            </el-switch>
          </div>
        </el-table-column>
        <el-table-column prop="userProblemNum" label="用户提问数量" align="center" width="95"></el-table-column>
        <el-table-column prop="createTime" label="创建日期" width="125" align="center"></el-table-column>
        <!--操作 -->
        <el-table-column label="操作" align="center" width="100">
          <div slot-scope="scope">
            <cms-button type="edit"
                        @click.native="routerLink('/problem/update','update',scope.row.id)"
                        v-perms="'/problem/update'"></cms-button>
            <cms-button type="delete"
                        @click.native="batchDelete($api.problemDelete,scope.row.id,'该操作会连用户问题数据一同删除')"
                        v-perms="'/problem/delete'"></cms-button>
            <cms-button type="view" @click.native="lookUserProblem(scope.row.id)"
                        v-perms="'/problem/userProblemPageList'"></cms-button>
          </div>
        </el-table-column>
      </el-table>

      <!-- 表格底部 -->
      <div class="cms-list-footer" style="padding-bottom:100px;">
        <div class="cms-left">
          <el-button :disabled="disabled" @click="batchDelete($api.problemDelete,ids,'该操作会连问答数据一同删除')"
                     v-perms="'/problem/delete'">批量删除
          </el-button>
        </div>
        <!-- cms分页组件 -->
        <cms-pagination :total="total" @change="getPages"></cms-pagination>
      </div>

      <el-drawer title="用户提问" :visible.sync="table" size="65%">
        <el-table :data="drawerTableData" stripe @selection-change="checkIdsAndStatus" v-loading="loading">
          <el-table-column type="selection" width="65" align="right"></el-table-column>
          <el-table-column prop="id" label="id" width="150" align="center"></el-table-column>
          <el-table-column prop="nickName" label="昵称" width="150" align="center"></el-table-column>
          <el-table-column prop="text" label="问题" width="150" align="center"></el-table-column>
          <el-table-column prop="reply" label="回复" width="250" align="center"></el-table-column>
          <el-table-column prop="isChecked" label="审核状态" align="center" width="180">
            <div slot-scope="scope">
              <span v-if="scope.row.isChecked==0">待审核</span>
              <span v-if="scope.row.isChecked==1">审核通过</span>
              <span v-if="scope.row.isChecked==2">审核不通过</span>
            </div>
          </el-table-column>
          <el-table-column prop="createTime" label="创建日期" width="150" align="center"></el-table-column>
          <!--操作 -->
          <el-table-column label="操作" align="center" width="150">
            <div slot-scope="scope">
              <cms-button type="icon-shenhe"
                          @click.native="showUserProblemCheck(scope.row.id,scope.row.isChecked,scope.row.text,scope.row.remark)"
                          v-perms="'/userProblem/check'"></cms-button>
              <cms-button type="edit"
                          @click.native="showReply(scope.row.id,scope.row.isChecked,scope.row.text,scope.row.reply)"
                          v-perms="'/problem/userProblemReply'"></cms-button>
              <cms-button type="delete" @click.native="userProblemDeleteBatch($api.commentRemove,scope.row.id)"
                          v-perms="'/problem/userProblemDelete'"></cms-button>
            </div>
          </el-table-column>
        </el-table>
        <div class="cms-list-footer" style="padding-bottom:100px;">
          <div class="cms-left">
            <el-button :disabled="disabled" @click="userProblemDeleteBatch($api.commentRemove,ids)"
                       v-perms="'/problem/userProblemDelete'">
              批量删除
            </el-button>
          </div>
          <cms-pagination :total="drawerTotal" @change="getDrawerPages"></cms-pagination>
        </div>

        <el-dialog :visible.sync="isShowCheck" title="问题审核">
          <el-form ref="checkForm" :model="checkInfo" :rules="checkRule" label-width="162px">
            <el-form-item label="问题Id" class="flex-100" prop="commentId">
              <el-input placeholder="问题Id" v-model="checkInfo.commentId" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="问题内容" class="flex-100" prop="questionText">
              <el-input type="textarea" placeholder="问题内容" v-model="checkInfo.questionText" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="当前状态" class="flex-100">
              <div slot-scope="scope">
                <span v-if="checkInfo.oldIsChecked==0">待审核</span>
                <span v-if="checkInfo.oldIsChecked==1">审核通过</span>
                <span v-if="checkInfo.oldIsChecked==2">审核不通过</span>
              </div>
            </el-form-item>
            <el-form-item label="审核状态" class="flex-100" prop="isChecked">
              <el-radio-group v-model="checkInfo.isChecked" :disabled="checkInfo.oldIsChecked!=0">
                <el-radio :label="1">审核通过</el-radio>
                <el-radio :label="2">审核不通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="原因" class="flex-100" v-if="checkInfo.isChecked==2" prop="remark">
              <el-input type="text" :rows="15" placeholder="请输入原因" v-model="checkInfo.remark"
                        :disabled="checkInfo.oldIsChecked!=0"></el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: center">
            <el-button type="primary" @click="goCheckUserProblem(checkInfo)" v-if="checkInfo.oldIsChecked==0">审核
            </el-button>
          </div>
        </el-dialog>

        <el-dialog :visible.sync="isShowReply" style="padding-left: 350px">
          <el-form ref="replyForm" :model="replyInfo" :rules="replyRule" label-width="162px">
            <el-form-item label="问题Id" class="flex-100" prop="commentId">
              <el-input placeholder="问题Id" v-model="replyInfo.commentId" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="问题内容" class="flex-100" prop="questionText">
              <el-input placeholder="问题内容" v-model="replyInfo.questionText" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="审核状态" class="flex-100" prop="isChecked">
              <el-radio-group v-model="replyInfo.isChecked" :disabled="true">
                <el-radio :label="1">审核通过</el-radio>
                <el-radio :label="2">审核不通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="回复内容" class="flex-100">
              <el-input type="textarea" :rows="15" placeholder="请输入内容" v-model="replyInfo.replyText"></el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: center">
            <el-button type="primary" @click="goReply(replyInfo)" v-perms="'/problem/userProblemReply'">回复</el-button>
          </div>
        </el-dialog>
      </el-drawer>

    </div>
  </section>

</template>

<script>
  import listMixins from '@/mixins/list'
  import drawerListMixins from '@/mixins/drawerList'
  import va from "@/rules";

  export default {
    mixins: [listMixins, drawerListMixins],
    data() {
      let required = va.required("此项必填");
      return {
        table: false,
        params: {//请求参数
          areaId: '',
          pageNo: 1,
          pageSize: 10,
          isChild: false,
          isTop: '',
          isDisplay: '',
          problemName: '',
          problemTopicId: ''
        },
        breadItems: [
          {
            name: '根目录',
            id: ''
          }
        ], //面包屑
        props: {
          label: 'name',
          children: 'zones',
          isLeaf: 'isChild',
          id: 'id'
        },
        isShow: false,
        tableHeight: 500,
        isShowReply: false,
        isShowCheck: false,
        replyInfo: {
          isChecked: 0,
          problemId: '',
          questionText: '',
          replyText: '',
          commentId: '',
          remark: ''
        },
        checkInfo: {
          oldIsChecked: 0,
          isChecked: 0,
          problemId: '',
          questionText: '',
          commentId: '',
          remark: ''
        },
        replyRule: {
          remark: [required],
          replyText: [required],
        },
        checkRule: {},
        problemTopicId: '',
        nowProblemId: ''

      }
    },
    methods: {
      goQuery() {
        this.getTableData(this.params);
      },
      changeState(id, value, type) {
        let params = {}
        if (type == 1) {
          params = {problemId: id, isDisplay: value}
        }
        if (type == 2) {
          params = {problemId: id, isTop: value}
        }
        this.$http.post(this.$api.problemUpdate, params).then(res => {
          if (res.code == "200") {
            this.successMessage('操作成功');
            this.getTableData(this.params);
          }
        });
      },
      getProblemTopic(data, node) {
        this.creatBread(node, []);//获取问答话题树点击
        this.params.problemTopicId = data.id;
        this.problemTopicId = data.id;
        this.params.problemTopicName = data.name;
        if (this.$myUtils.isNull(this.params.problemTopicId)) {
          this.isShow = false;
        } else {
          this.isShow = true;
        }
        this.getTableData(this.params);
      },
      clickBread(id, index) {
        //面包屑
      },
      creatBread(node, arr) {
        if (node.parent != null) {
          let params = {name: node.data.name, id: node.data.id}
          arr.push(params)
          this.creatBread(node.parent, arr)
        } else {
          this.breadItems = arr.reverse()
          return false
        }
      },
      lookUserProblem(problemId) {
        this.table = true;
        this.replyInfo.problemId = problemId;
        this.nowProblemId = problemId;
        let params = {targetId: problemId, targetEntity: "JcProblem"}
        this.initDrawerTableData(this.$api.userProblemPageList, params) //请求列表
      },
      userProblemDeleteBatch(url, ids, isChecked) {
        this.$confirm('是否删除？', '警告', {type: "error"}).then(mes => {
          this.$http.post(url, {ids: ids, isChecked: isChecked}).then(res => {
            console.log(res);
            if (res.code == "200") {
              this.successMessage('删除成功');
              let params = {targetId: this.nowProblemId, targetEntity: "JcProblem"}
              this.initDrawerTableData(this.$api.userProblemPageList, params) //请求列表
            }
          });
        }).catch(error => {
          console.log(error);
        });
      },
      showUserProblemCheck(commentId, isChecked, text, remark) {
        //用户问题审核
        this.checkInfo.commentId = commentId;
        this.checkInfo.isChecked = isChecked;
        this.checkInfo.oldIsChecked = isChecked;
        this.checkInfo.questionText = text;
        this.checkInfo.remark = remark;
        this.isShowCheck = true;
      },
      goCheckUserProblem(checkInfo) {
        //用户问题审核
        let form = this.$refs['checkForm'];
        form.validate((valid) => {//验证方法
          if (valid) {
            this.$http.post(this.$api.commentUserProblemChecked, checkInfo).then(res => {
              if (res.code == "200") {
                this.successMessage('操作成功');
                this.isShowCheck = false;
                let params = {targetId: this.nowProblemId, targetEntity: "JcProblem"}
                this.initDrawerTableData(this.$api.userProblemPageList, params) //请求列表
              }
            });
          }
        })
      },
      showReply(commentId, isChecked, questionText, replyText) {
        if (isChecked == 0) {
          this.errorMessage("请先审核");
        } else {
          this.isShowReply = true;
          this.replyInfo.commentId = commentId;
          if (isChecked == 0) {
            this.replyInfo.isChecked = 1;
          } else {
            this.replyInfo.isChecked = isChecked;
          }
          this.replyInfo.questionText = questionText;
          this.replyInfo.replyText = replyText;
        }

      },
      goReply(params) {
        let form = this.$refs['replyForm'];
        form.validate((valid) => {//验证方法
          if (valid) {
            this.$http.post(this.$api.userProblemReply, params).then(res => {
              if (res.code == "200") {
                this.successMessage('操作成功');
                this.isShowReply = false;
                let params = {targetId: this.nowProblemId, targetEntity: "JcProblem"}
                this.initDrawerTableData(this.$api.userProblemPageList, params) //请求列表
              }
            });
          }
        })
      },
      handleClose(done) {
        this.$confirm('确定要提交表单吗？').then(mes => {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            done();
          }, 2000);
        }).catch(error => {
        });
      }
    },
    created() {
      this.$store.dispatch('setCollapse', false) //收缩状态栏
      if (this.$route.query.type == 'list') {
        if (this.$route.query.id == 0) {
          this.params.areaId = ''
        } else {
          this.params.areaId = this.$route.query.id
        }
      }
      this.initTableData(this.$api.problemPageList, this.params) //请求列表
    },
    mounted() {
      let clientHeight = document.body.clientHeight
      $('.cms-body').css('minHeight', clientHeight - 110 + 'px')
    },
    watch: {
      problemTopicId(nowVal, oldVal) {
        if (this.$myUtils.isNull(oldVal)) {
          this.params.pageNo = 1;
        }
      },
    }
  }
</script>

<style>
  .bread-box {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
  }

  .bread-box label {
    color: #5a5e66;
    font-size: 14px;
  }

  .type-bread {
    margin-right: 12px;
  }

  .bread-items {
    display: inline-block;
  }

  .bread-items a {
    color: #1276c3;
    font-size: 14px;
  }

  .bread-items a::after {
    content: '/';
    padding: 0 5px;
    color: #1276c3;
  }

  .bread-items:last-child a::after {
    content: '';
    padding: 0 5px;
    color: #1276c3;
  }

</style>
